import React from "react";
import Home from "./pages/Home";
import Article from "./pages/Article";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Literature from "./pages/Literature";
import Region from "./pages/Region";
import AntDesign from "react-native-vector-icons/AntDesign";
import Entypo from "react-native-vector-icons/Entypo";
import { Provider } from "@ant-design/react-native";
import { CommonConfig } from "./util";


const Tab = createBottomTabNavigator();

function App(): JSX.Element {
  // tab数据
  const tabData = [
    {
      title: "首页",
      iconName: "home",
      name: "Home",
      component: Home
    },
    {
      title: "文献",
      iconName: "documents",
      name: "Literature",
      component: Literature
    },
    {
      title: "文章",
      iconName: "filetext1",
      name: "Article",
      component: Article
    },
    {
      title: "区域",
      iconName: "sharealt",
      name: "Region",
      component: Region
    }
  ];

  return (
    // 路由根容器
    <Provider>
      {/*路由容器*/}
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Article"
                       screenOptions={{
                         tabBarActiveTintColor: CommonConfig.color
                       }}>
          {
            tabData.map(v => {
              return (
                <Tab.Screen name={v.name} component={v.component} key={v.iconName}
                            options={{
                              tabBarLabel: v.title,
                              title: v.title,
                              headerTitleAlign: "center",
                              headerTintColor: "#fff",
                              headerStyle: {
                                backgroundColor: CommonConfig?.color
                              },
                              tabBarIcon: ({ color, size }) => {
                                if (v.name === "Literature") {
                                  return (<Entypo color={color} size={size} name={v.iconName} />);
                                }
                                return (<AntDesign color={color} size={size} name={v.iconName} />);
                              }
                            }} />
              );
            })
          }
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  );
}


export default App;
